<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝搜索框</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        section{
            font-size: 20px;
            text-align: center;
        }
        #top{
            background: #f5f5f5;
            height: 35px;
            line-height: 35px;
        }
        .adv_con{
            width: 1190px;
            height: 100px;
            line-height: 100px;
            margin: 0 auto;
            background: orange;
        }
        .search_con{
            width: 1190px;
            height: 130px;
            background: skyblue;
            margin: 0 auto;
            display: flex;
        }
        .search_box{
            width: 400px;
            height: 50px;
            border-radius: 25px;
            background: pink;
            margin: auto;
            display: flex;
            overflow: hidden;
            box-sizing: border-box;
            border: 3px solid orangered;
        }
        .search_box input{
            flex: 1;
            border: none;
            padding-left: 20px;
            outline: none;
        }
        .search_box button{
            width: 100px;
            border: none;
            border-left: 3px solid orangered;
            outline: none;
        }
        #fixSearch{
            position: fixed;
            top: 0;
            background: #58bc58;
            width: 100%;
            display: none;
        }
        #fixSearch .fix-con{
            margin: 0 auto;
            width: 1190px;
            height: 80px;
            display: flex;
        }
        #fixSearch .fix-con .fix_box{
            margin: auto;
            width: 400px;
            height: 50px;
            display: flex;
            border-radius: 25px;
            overflow: hidden;
            box-sizing: border-box;
            border: 3px solid orangered;
        }
        #fixSearch .fix-con .fix_box input{
            flex: 1;
            outline: none;
            padding-left: 20px;
        }
        #fixSearch .fix-con .fix_box button{
            width: 100px;
            background: orangered;
            color: #fff;
            font-size: 16px;
            border: none;
        }
        #toTop{
            width: 60px;
            height: 60px;
            background: pink;
            text-align: center;
            line-height: 60px;
            position: fixed;
            right: 0;
            bottom: 40px;
            display: none;
        }
    </style>
</head>
<body>
    <section id='top'>top</section>
    <section id='adv'>
        <div class="adv_con">adv</div>
    </section>
    <section id='search'>
        <div class="search_con">
            <div class="search_box">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </section>
    <section id='fixSearch'>
        <div class="fix-con">
            <div class="fix_box">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </section>
    <section id='toTop'>toTop</section>


    <script>
        window.onscroll = function(){
            if(scrollY>=230){
                fixSearch.style.display = 'block';
            }else{
                fixSearch.style.display = 'none';
            }

            if(scrollY>=350){
                toTop.style.display = 'block';
            }else{
                toTop.style.display = 'none';
            }
        }

        var timer;
        toTop.onclick = function(){
            clearInterval(timer)
            timer = setInterval(function(){
                scrollBy({top:-150});
                if(scrollY == 0){
                    clearInterval(timer)
                }
            },30);


        }
    </script>
</body>
</html>